<script setup>
import { onMounted, ref } from 'vue'
import http_message from '@/api/message.js'
import { ElMessage } from 'element-plus'
import router from '@/router/index.js'
import { useUserStore } from '@/stores/user.js'

const userStore = useUserStore()
const active = ref(1) //当前选中的
const activeContent = ref('未读消息')
// 当前选中改变
const changeActive = (index, text) => {
  if (index === 3) {
    router.push('/')
  }
  activeContent.value = text
  active.value = index
  flushData(index)
}
const tableData = ref([]) //表格数据
//  获得全部通知
const getAll = async () => {
  const result = await http_message.getAll(
    userStore.userInfo.userId,
    page.value,
    size.value
  )
  if (result.code === 200) {
    tableData.value = result.data.records
    total.value = result.data.total
  }
}
// 获得未读通知
const unread = async () => {
  const result = await http_message.unread(
    userStore.userInfo.userId,
    page.value,
    size.value
  )
  if (result.code === 200) {
    tableData.value = result.data.records
    total.value = result.data.total
  }
}
// 获得已读通知
const read = async () => {
  const result = await http_message.read(
    userStore.userInfo.userId,
    page.value,
    size.value
  )
  if (result.code === 200) {
    tableData.value = result.data.records
    total.value = result.data.total
  }
}
// 打开链接
const openLink = async (data) => {
  window.open(data.content, '_blank')
  await http_message.setRead(data.noticeId)
  flushData(active.value)
}
// 刷新数据
const flushData = (index) => {
  if (index === 0) {
    getAll()
  } else if (index === 1) {
    unread()
  } else if (index === 2) {
    read()
  }
}
// 分页数据
const page = ref(1)
const size = ref(20)
const total = ref(50)
const handleSizeChange = (val) => {
  size.value = val
  flushData(active.value)
}
const handleCurrentChange = (val) => {
  page.value = val
  flushData(active.value)
}
// 表格多选
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
// 按钮操作
// 删除通知
const deleteNotice = async () => {
  const noticeIdList = []
  for (let i = 0; i < multipleSelection.value.length; i++) {
    noticeIdList.push(multipleSelection.value[i].noticeId)
  }
  const result = await http_message.deleteBluk(noticeIdList)
  if (result.code === 200) {
    ElMessage({
      message: '删除成功',
      type: 'success'
    })
  }
  flushData(active.value)
}
// 设置已读
const setRead = async () => {
  const noticeIdList = []
  for (let i = 0; i < multipleSelection.value.length; i++) {
    noticeIdList.push(multipleSelection.value[i].noticeId)
  }
  const result = await http_message.setReadBluk(noticeIdList)
  if (result.code === 200) {
    ElMessage({
      message: '已读成功',
      type: 'success'
    })
  }
  flushData(active.value)
}
// 批量设置已读
const setReadAll = async () => {
  const noticeIdList = []
  for (let i = 0; i < tableData.value.length; i++) {
    noticeIdList.push(tableData.value[i].noticeId)
  }
  const result = await http_message.setReadBluk(noticeIdList)
  if (result.code === 200) {
    ElMessage({
      message: '全部删除成功',
      type: 'success'
    })
  }
  flushData(active.value)
}
// 批量删除
const deleteNoticeAll = async () => {
  const noticeIdList = []
  for (let i = 0; i < tableData.value.length; i++) {
    noticeIdList.push(tableData.value[i].noticeId)
  }
  const result = await http_message.deleteBluk(noticeIdList)
  if (result.code === 200) {
    ElMessage({
      message: '全部删除成功',
      type: 'success'
    })
  }
  flushData(active.value)
}
onMounted(() => {
  window.scrollTo(0, 0)
  unread()
})
</script>

<template>
  <div class="notic-box">
    <div class="navbar">
      <div
        style="
          height: 100px;
          background-color: #d9dee4;
          font-weight: 900;
          text-align: center;
          line-height: 100px;
          font-size: 20px;
        "
      >
        消息中心
      </div>
      <div
        @click="changeActive(0, '全部消息')"
        :class="['item', active === 0 ? 'active' : '']"
      >
        全部消息
        <el-tag
          v-if="active === 0"
          style="margin-left: 55px; margin-bottom: 5px"
          class="ml-2"
          type="success"
          >{{ total }}</el-tag
        >
      </div>
      <div
        @click="changeActive(1, '未读消息')"
        :class="['item', active === 1 ? 'active' : '']"
      >
        未读消息
        <el-tag
          v-if="active === 1"
          style="margin-left: 55px; margin-bottom: 5px"
          class="ml-2"
          type="success"
          >{{ total }}</el-tag
        >
      </div>
      <div
        @click="changeActive(2, '已读消息')"
        :class="['item', active === 2 ? 'active' : '']"
      >
        已读消息
        <el-tag
          v-if="active === 2"
          style="margin-left: 55px; margin-bottom: 5px"
          class="ml-2"
          type="success"
          >{{ total }}</el-tag
        >
      </div>
      <div
        @click="changeActive(3, '')"
        :class="['item', active === 3 ? 'active' : '']"
      >
        返回
      </div>
    </div>
    <div class="content">
      <div style="font-size: 22px; margin: 10px">| {{ activeContent }}</div>
      <el-divider>
        <el-icon><star-filled /></el-icon>
      </el-divider>
      <div style="margin: 30px 100px">
        <el-button
          @click="deleteNotice"
          :disabled="!multipleSelection.length > 0"
          >删除</el-button
        >
        <el-button
          @click="setRead"
          :disabled="!multipleSelection.length > 0"
          v-if="active !== 2"
          >标记已读</el-button
        >
        <el-button
          :disabled="!tableData.length > 0"
          v-if="active !== 2"
          @click="setReadAll"
          >全部已读</el-button
        >
        <el-button @click="deleteNoticeAll" :disabled="!tableData.length > 0"
          >全部删除</el-button
        >
      </div>
      <el-table
        @selection-change="handleSelectionChange"
        :data="tableData"
        border
        style="width: 97%; margin-left: 20px"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="date" label="标题内容">
          <template #default="scope">
            <div style="cursor: pointer" @click="openLink(scope.row)">
              <span
                style="font-weight: 900; font-size: 26px; color: red"
                v-if="scope.row.isRead === 0"
                >·</span
              >
              {{ scope.row.title }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="提交时间" width="200" />
        <el-table-column prop="type" label="类型" width="200" />
      </el-table>
      <div style="margin-left: 380px; margin-top: 20px">
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="size"
          page-sizes="[20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.notic-box {
  width: 100%;
  height: 100vh;
  display: flex;
  .navbar {
    flex: 1;
    background-color: #eaedf1;
    .item {
      height: 50px;
      padding-left: 30px;
      line-height: 50px;
      cursor: pointer;
    }
    .item:hover {
      background-color: #fff;
      color: black;
    }
    .active {
      background-color: #409eff;
      color: white;
    }
  }
  .content {
    flex: 7;
  }
}
</style>
